<template>
  <div class="statement scrollbar-wrap">
    <div class="statement-head">
      <span>
        <header-select @selectProject="getProject" />
      </span>
    </div>
    <el-scrollbar
      v-loading="loading"
      style="height: calc(100vh - 140px);"
      element-loading-text="拼命加载中..."
    >
      <div
        v-for="(item, index) in buildingData"
        :key="index"
        :name="index"
        class="building-schedule"
        @click="gotoBuildingDetail(item.buildingId, item.buildingName)"
      >
        <BodyCharts :data="item" style="height: 200px" />
        <div class="building-name" style="height: 35px">{{ item.buildingName }}</div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import { projectOverall } from '@/api/statement/processSchedule'
import HeaderSelect from './components/HeaderSelect'
import BodyCharts from './components/BodyCharts'
export default {
  name: 'ProcessSchedule',
  components: {
    HeaderSelect,
    BodyCharts
  },
  data() {
    return {
      /* 整体遮罩 */
      loading: true,
      /* 当前选中项目 */
      currentProject: {},
      /* 楼栋数据 */
      buildingData: []
    }
  },
  created() {
  },
  methods: {
    /* 选择项目 */
    getProject(project) {
      if (!project) {
        this.loading = false
        return
      }
      this.currentProject = project
      this.getBuildingChartData()
    },
    /* 获取楼栋统计数据 */
    getBuildingChartData() {
      this.loading = true
      this.buildingData = []
      projectOverall({ projectId: this.currentProject.id }).then(res => {
        if (res.code === 200) {
          this.buildingData = res.data
        }
        this.loading = false
      }).catch(() => { // 接口请求错误处理
        this.loading = false
      })
    },
    /* 点击获取楼栋工序验收情况 */
    gotoBuildingDetail(buildingId, buildingName) {
      console.log(buildingId, buildingName)
    }
  }
}
</script>
<style scoped lang="scss">
  .statement {
    .statement-head {
      margin: 10px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .type-tab {
        .tab {
          margin-left: 10px;
        }
      }
    }
  }

  .building-schedule{
    float:left;
    width:200px;
    height: 300px;
    cursor: pointer;
    .building-name{
      color: #666666;
      text-align: center;
      font-weight: bold;
    }
  }
</style>
